<!DOCTYPE html>
<html>
<head>
  <style>
    /* 设置轮播容器的样式 */
    .slideshow {
      width: 400px;
      height: 300px;
      overflow: hidden;
      position: relative;
    }

    /* 设置轮播图像的样式 */
    .slideshow img {
      width: 100%;
      height: auto;
      position: absolute;
      transition: opacity 1s ease-in-out;
    }
  </style>
</head>
<body>
  <div class="slideshow">
    <img src="photo/1.jpeg" alt="Image 1">
    <img src="photo/2.jpeg" alt="Image 2">
    <img src="photo/3.jpeg" alt="Image 3">
    <img src="photo/4.jpeg" alt="Image 4">
    <img src="photo/5.jpeg" alt="Image 5">
    <img src="photo/6.jpeg" alt="Image 6">
    <img src="photo/7.jpeg" alt="Image 7">
    <img src="photo/8.jpeg" alt="Image 8">
    <img src="photo/9.jpeg" alt="Image 9">
    <img src="photo/10.jpeg" alt="Image 10">
    <img src="photo/11.jpeg" alt="Image 11">
    <img src="photo/12.jpeg" alt="Image 12">
  </div>

  <script>
    // JavaScript部分
    const images = document.querySelectorAll('.slideshow img');
    let currentIndex = 0;

    // 隐藏所有图像，除了当前索引的图像
    function hideImages() {
      images.forEach((image, index) => {
        if (index !== currentIndex) {
          image.style.opacity = 0;
        }
      });
    }

    // 显示当前索引的图像
    function showCurrentImage() {
      images[currentIndex].style.opacity = 1;
    }

    // 切换到下一张图像
    function nextImage() {
      hideImages();
      currentIndex = (currentIndex + 1) % images.length;
      showCurrentImage();
    }

    // 初始化轮播图
    function initSlideshow() {
      showCurrentImage();
      setInterval(nextImage, 2000); // 每2秒切换一次图像
    }

    // 调用初始化函数
    initSlideshow();
  </script>
</body>
</html>
